<template>
  <div class="electricity-bar u-df-st" style="width: 150px; height: 21px">
    <svg xmlns="http://www.w3.org/2000/svg" width="10.543" height="30.31" class="electricity-svg">
      <path d="M5.883 30.311H0V0h5.883l4.659 4.659v20.992L5.884 30.31z" fill="#0DB49B" />
    </svg>
    <div class="electricity-ani"></div>
    <svg xmlns="http://www.w3.org/2000/svg" width="10.543" height="30.31" class="electricity-reverseSvg">
      <path d="M5.883 30.311H0V0h5.883l4.659 4.659v20.992L5.884 30.31z" fill="#83a4ef" />
    </svg>
  </div>
</template>
<script>
export default {
  name: 'eleBar',
  props: {
    style: {
      type: Object,
      default: () => ({}),
    },
    fillColor: {
      type: String,
      default: '#d1b660',
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
/*$fillColor: v-bind(fillColor);*/
.electricity-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 208px;
  height: 30px;
  background-color: rgba(176, 195, 232, 0.05);
}
.electricity-svg {
  width: 22px;
  // height: 100%;
  margin-right: 4px;
}
.electricity-reverseSvg {
  width: 15px;
  // height: vh(30);
  transform: rotateY(180deg);
}
.electricity-ani {
  width: 180px;
  height: 20px;
  mask: linear-gradient(90deg, #0db49b 70%, #0000 0) 0/8%;
  -webkit-mask: linear-gradient(90deg, #0db49b 70%, #0000 0) 0/8%;
  background: linear-gradient(#0db49b 0 0) 0/0% no-repeat rgba(176, 195, 232, 0.5);
  animation: p4 2s infinite steps(6);
}

@keyframes p4 {
  100% {
    background-size: 120%;
  }
}
</style>
